<!--
 * @Description: 图标选择器组件
-->
<template>
  <div class="my-icon-select">
    <div class="my-icon-select__wrapper" :class="{ hasValue: valueIcon }" @click="openDialog">
      <el-input :prefix-icon="valueIcon || 'el-icon-plus'" v-model="valueIcon" readonly></el-input>
    </div>
    <el-dialog title="图标选择器" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
      <div class="my-icon-select__dialog" style="margin: -20px 0 -10px 0">
        <el-form :rules="{}">
          <el-form-item prop="searchText">
            <el-input
              class="my-icon-select__search-input"
              prefix-icon="el-icon-search"
              v-model="inputValue"
              ref="inputRef"
              placeholder="搜索"
              size="large"
              clearable
            />
          </el-form-item>
        </el-form>
        <el-tabs>
          <el-tab-pane v-for="item in iconsList" :key="item.name">
            <template #label>
              {{ item.name }}
              <el-tag size="small" type="info" :key="Math.random()">{{ item.icons.length }}</el-tag>
            </template>
            <div class="my-icon-select__list">
              <el-scrollbar>
                <ul>
                  <el-empty v-if="item.icons.length == 0" :image-size="100" description="未查询到相关图标" />
                  <li v-for="icon in item.icons" :key="icon" @click="selectIcon(icon)">
                    <span :data-icon="icon"></span>
                    <el-icon><component :is="icon" /></el-icon>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <el-button @click="clearIcon" text>清除</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="iconSelect">
import { computed, ref } from 'vue'
import configIconList, { type IIcon } from '@/config/iconSelect'
import { ElInput } from 'element-plus'

interface SelectIconProps {
  iconValue: string
  title?: string
  clearable?: boolean
  placeholder?: string
}

const props = withDefaults(defineProps<SelectIconProps>(), {
  iconValue: '',
  title: '请选择图标',
  clearable: true,
  placeholder: '请选择图标'
})
// 重新接收一下，防止打包后 clearable 报错
const valueIcon = ref(props.iconValue)

// open Dialog
const dialogVisible = ref<boolean>(false)
const openDialog = () => (dialogVisible.value = true)

// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
  'update:iconValue': [value: string]
}>()
const selectIcon = (item: string) => {
  console.log(item)
  dialogVisible.value = false
  valueIcon.value = item
  emit('update:iconValue', item)
  setTimeout(() => inputRef.value?.$el.blur(), 0)
}

// 清空图标
const inputRef = ref<InstanceType<typeof ElInput> | null>(null)
const clearIcon = () => {
  valueIcon.value = ''
  emit('update:iconValue', '')
  setTimeout(() => inputRef.value?.$el.blur(), 0)
}

// 监听搜索框值
const inputValue = ref<string>('')
const iconsList = computed(() => {
  if (!inputValue.value) return configIconList
  let filterList: IIcon[] = []
  configIconList.forEach((item: IIcon) => {
    filterList.push({
      name: item.name,
      icons: item.icons.filter((n: string) => n.includes(inputValue.value.toLowerCase()))
    })
  })
  return filterList
})
</script>

<style scoped lang="scss">
.my-icon-select {
  display: inline-flex;
}
.my-icon-select__wrapper {
  cursor: pointer;
  display: inline-flex;

  &:deep(.el-input__wrapper).is-focus {
    box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
  }
  &:deep(.el-input__inner) {
    flex-grow: 0;
    width: 0;
  }
  &:deep(.el-input__icon) {
    margin: 0;
    font-size: 16px;
  }
  &.hasValue {
    &:deep(.el-input__icon) {
      color: var(--el-text-color-regular);
    }
  }
}
.my-icon-select__list {
  height: 270px;
  overflow: auto;
  li {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px;
    vertical-align: top;
    transition: all 0.1s;
    border-radius: 4px;
    position: relative;
    span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      cursor: pointer;
    }
    i {
      display: inline-block;
      width: 100%;
      height: 100%;
      font-size: 26px;
      color: #6d7882;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    &:hover {
      box-shadow: 0 0 1px 4px var(--el-color-primary);
      background: var(--el-color-primary-light-9);
      i {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
